<template>
	<view class="good-item">
		<view class="g-row">
			<view class="g-col el-flex" v-for="(item,index) in list" :key="index" @click="toShopDetail(item)">
				<view class="col-box el-flex">
					<view class="item-img" :style="`background-image: url(${item.value.goods.img800s});`">
					</view>
					<view class="info-box">
						<text class="name text-ellipsis">{{item.value.goods.name}}</text>
						<text class="info text-ellipsis">{{item.value.goods.summary|summary}}</text>
						<view class="h"></view>
						<text class="moneys"><text class="cur">￥</text>{{item.value.goods.price/100}} <text class="qi"
								v-if="item.value.goods.multiPrice">起</text></text>
						<text class="del"
							v-if="item.value.goods.marketPrice!=item.value.goods.price">￥{{item.value.goods.marketPrice/100}}</text>
					</view>
					<view class="buy-btn el-flex">
						立即购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "one-row-detail",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		filters: {
			summary: function(params) {
				if (params.length > 0) {
					params = params.replace(/\n/g, "")
				}
				return params
			},
		},
		methods:{
			toShopDetail(item) {
				let itemId = item.value.goods.itemId
				if (itemId) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${itemId}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.good-item {
		padding: 0 .2rem;
		background-color: rgb(249, 246, 220);
	}

	.good-item {
		.g-row {
			width: 100%;

			.g-col {
				position: relative;
				width: 100%;
				background-color: #fff;
				border-radius: .2rem;
				height: 2.455rem;
				margin-bottom: .134rem;

				.col-box {
					width: 100%;
					height: 2.264rem;
					overflow: hidden;
					justify-content: space-between;

					.item-img {
						width: 2.532rem;
						min-width: 2.532rem;
						height: 100%;
						display: block;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center center;
					}

					.buy-btn {
						border-radius: .27rem;
						text-align: center;
						font-weight: bold;
						font-size: .25rem;
						color: rgb(255, 255, 255);
						background-image: linear-gradient(1.5708rad, rgb(255, 62, 43), rgb(255, 138, 73));
					}

					.buy-btn {
						width: 1.42rem;
						top: 1.63rem;
						left: 5.12rem;
						height: .54rem;
						position: absolute;
					}

					.info-box {
						flex: 1;
						padding-top: .30rem;
						padding-right: .27rem;
						padding-left: .134rem;
						text-align: left;

						.name {
							height: .38rem;
							font-size: .288rem;
							display: block;
							text-align: left;
							font-weight: bold;
							color: #3c3c3c;
							max-width: 100%;
						}

						.info {
							height: .288rem;
							opacity: 0.9;
							display: block;
							font-size: .23rem;
							text-align: left;
							max-width: 92%;
							margin-top: .096rem;
							color: rgb(51, 51, 51);
						}

						.h {
							margin-bottom: .115rem;
							height: .4rem;
							margin-top: .096rem;
						}

						.cur {
							font-size: .2rem;
						}

						.qi {
							font-size: .2rem;
						}

						.del {
							text-decoration-line: line-through;
							opacity: 0.5;
							color: rgb(0, 0, 0);
							margin-left: .12rem;
							font-weight: 400;
							margin-top: .096rem;
							font-size: .2rem;
						}

						.moneys {
							font-size: .30rem;
							margin-top: .27rem;
							font-weight: 600;
							text-align: left;
							font-family: Heiti SC, STHeiti;
							line-height: 1.2;
							color: rgb(255, 92, 55);
						}
					}
				}


			}
		}
	}


	.good-item {
		.row {
			background-color: rgb(249, 246, 220);
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}
</style>